<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>demo</title>
		<link rel="stylesheet" type="text/css" href="./css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="./css/base.css" />
		<script src="../libs/avalon/avalon.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!-- nav -->
		<nav ms-controller="nav" class="margin">
			<div class="container">
				<a class="inline-block margin" ms-attr-href="#{{el}}" ms-repeat="nav">{{el}}</a>
			</div>
		</nav>
		<script type="text/javascript">
			var vmNav = avalon.define({
				$id: 'nav',
				nav: ['background', "button"]
			})
		</script>

		<!-- background -->
		<fieldset ms-controller="background" class="margin">
			<legend id="background">background</legend>
			<div class="container">
				<div class="margin-bottom text-center equal" ms-repeat="bgColors">
					<div class="equal-child padding" ms-css-background-color="$val[0]" ms-css-color="$val[3]">{{$val[0]}}</div>
					<div class="equal-child padding" ms-css-background-color="$val[1]" ms-css-color="$val[3]">{{$val[1]}}</div>
					<div class="equal-child padding" ms-css-background-color="$val[2]" ms-css-color="'#fff'">{{$val[2]}}</div>
					<div class="equal-child padding" ms-css-background-color="$val[3]" ms-css-color="'#fff'">{{$val[3]}}</div>
				</div>
			</div>
			<hr />
			<div class="container">
				<div class="margin-bottom text-center equal" ms-repeat="bgColors">
					<div class="equal-child padding" ms-class="bg-{{$key}}-lighter">bg-{{$key}}-lighter</div>
					<div class="equal-child padding" ms-class="bg-{{$key}}-light">bg-{{$key}}-light</div>
					<div class="equal-child padding" ms-class="bg-{{$key}}">bg-{{$key}}</div>
					<div class="equal-child padding" ms-class="bg-{{$key}}-weight">bg-{{$key}}-weight</div>
				</div>
			</div>
			<hr />
			<div class="container">
				<textarea name="" rows="10" style="width: 100%;" ms-attr-value="css()"></textarea>
			</div>
		</fieldset>
		<script type="text/javascript">
			var vmBg = avalon.define({
				$id: 'background',
				bgColors: {
					blue: ["#eff", "#9cf", "#0ae", "#39c"],
					green: ["#efd", "#cfc", "#3c6", "#393"],
					red: ["#fee", "#fcc", "#f33", "#c33"],
					yellow: ["#ffd", "#ffc", "#f93", "#f60"],
					purple: ["#fef", "#ccf", "#90c", "#909"],
					gray: ["#eee", "#ddd", "#999", "#666"]
				},
				css: function() {
					var code = [];
					code.push("/**\n * background\n */");
					// bg
					avalon.each(vmBg.bgColors, function(key, val) {
						code.push(".bg-" + key + "{background-color: " + val[2] + "; color: #fff}");
					})
					code.push("")
						// bg lighter
					avalon.each(vmBg.bgColors, function(key, val) {
						code.push(".bg-" + key + "-lighter{background-color: " + val[0] + "; color: " + val[3] + "}");
					})
					code.push("")
						// bg light
					avalon.each(vmBg.bgColors, function(key, val) {
						code.push(".bg-" + key + "-light{background-color: " + val[1] + "; color: " + val[3] + "}");
					})
					code.push("")
						// bg lighter
					avalon.each(vmBg.bgColors, function(key, val) {
						code.push(".bg-" + key + "-weight{background-color: " + val[3] + "; color: #fff}");
					})
					return code.join("\n");
				}
			})
		</script>

		<!-- button -->
		<fieldset ms-controller="button" class="margin">
			<legend id="button">button</legend>
			<div class="container clearfix grid">
				<div class="grid-2 margin-bottom text-center" ms-repeat="btnColors">
					<button class="btn" ms-class="btn-{{$key}}">btn-{{$key}}</button>
				</div>
				<hr />
				<div class="grid-2 margin-bottom text-center" ms-repeat="btnColors">
					<button class="btn btn-outlined" ms-class="btn-{{$key}}">btn-{{$key}}</button>
				</div>
			</div>
		</fieldset>
		<script type="text/javascript">
			var vmBtn = avalon.define({
				$id: 'button',
				btnColors: {
					blue: ["#0ae", "#39c"],
					green: ["#3c6", "#393"],
					red: ["#f33", "#c33"],
					yellow: ["#f90", "#f60"],
					purple: ["#90c", "#909"],
					gray: ["#eee", "#ddd"]
				}
			})
		</script>
	</body>

</html>